window.addEventListener('load', function() {
		// 搜索框
	var search = document.querySelector('#serch');
	search.onfocus = function() {
		if(this.value == "小米12") {
			this.value = '';
			this.style.color = '#000';
		}
	}
	search.onblur = function() {
		if(this.value == "") {
			this.value = '小米12';
			this.style.color = '#999';
		}
	};	
	
		
	// 轮播图
	var banner = document.querySelector('.banner');
	var zuo = document.querySelector('.zuo');
	var you = document.querySelector('.you');
	var ul = document.querySelector('.lunbo');
	var ol = document.querySelector('.yuan').querySelector('ul');

	for (var i = 0; i < ul.children.length; i++) {
		// 创建li
		var li = document.createElement('li');
		// 设置小圆圈的索引号
		li.setAttribute('index', i);
		// 插入li
		ol.appendChild(li);
		// 4.排他思想
		li.addEventListener('click', function() {
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
			}
			this.className = 'current';
			// 5.点击小圆圈，移动图片
			// ul的移动距离 小圆圈的索引号 乘以 图片的宽度 负值
			// 通过点击拿到 li的索引号
			var index = this.getAttribute('index');
			num = index;
			circle = index;
			var bannerWith =  banner.offsetWidth;
			// console.log(bannerWith);
			// console.log(index);
			animate(ul, -index * bannerWith);
		})
	}
	// 设置第一个li
	ol.children[0].className = 'current';
	// 6.克隆第一张图片放到ul 最后面
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	// 7.点击右侧按钮 图片滚动一张
	var num = 0;
	var circle = 0;
	you.addEventListener('click', function() {
		if (num == ul.children.length - 1) {
			ul.style.left = '0';
			num = 0;
		}
		num++;
		animate(ul, -num * banner.offsetWidth);
		// 8.控制小圆点
		circle++;
		if (circle == ol.children.length) {
			circle = 0;
		}
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';
		console.log(num)
	});	
	// 9.左侧
	zuo.addEventListener('click', function() {
		if (num == 0) {
			num = ul.children.length - 1;
			ul.style.left = -num * banner.offsetWidth + 'px';
			
		}
		num--;
		animate(ul, -num * banner.offsetWidth);
		// 8.控制小圆点
		circle--;
		if (circle < 0) {
			circle = ol.children.length - 1;
		}
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';
		console.log(num)
	});	
	// 10.自动播放
	clearInterval(timer);
	var timer = setInterval(function() {
		you.click();
	}, 5000);
	// 鼠标在图上时停止轮播
	banner.addEventListener('mousemove', function() {
		clearInterval(timer);
		timer = null;
	})
	banner.addEventListener('mouseleave', function() {
		timer = setInterval(function() {
			you.click();
		}, 5000);
	});

	
	// 左侧快速导航
	var cheng = document.querySelector('.cheng');
	var lis = cheng.querySelectorAll('li');
	var ycbox1 = document.querySelector('.ycbox1');	
	for (var i = 0; i < lis.length; i++) {
		lis[i].onmouseover = function() {
			ycbox1.style.display = 'block';
		}
		lis[i].onmouseleave = function() {
			ycbox1.style.display = 'none';
		}
	};
	

	// 右侧返回顶部
	var ycxf = document.querySelector('.ycxf');
	var db = ycxf.querySelector('span');
	document.addEventListener('scroll', function() {
		// console.log(window.pageYOffset);
		if (window.pageYOffset >= 830) {
			db.style.display = 'block';
			ycxf.style.top = '90px';
		} else {
			db.style.display = 'none';
			ycxf.style.top = '195px';
		}
	});


});